<template>
  <div class="inside-page">
    <div class="resume content">
      <p class="detail-title">收到的简历 - {{ resumeTitle }}</p>
      <div class="filter">
        <span :class="[active === 1 && 'active']" @click="toSearch(1)"
          >未查看</span
        >
        <span :class="[active === 2 && 'active']" @click="toSearch(2)"
          >已查看</span
        >
        <span :class="[active === 3 && 'active']" @click="toSearch(3)"
          >星标简历</span
        >
      </div>
      <div class="resume-choose">
        <label>
          <input type="checkbox" v-model="checkAll" @change="changeAll" />
          <span>全选本页</span>
        </label>
        <span @click="submitBatch">批量忽略</span>
        <span @click="batchDownload">批量下载</span>
      </div>
      <div class="resume-list">
        <div class="resume-item" v-for="v in resumeList" :key="v.id">
          <label>
            <input type="checkbox" v-model="v.check" />
          </label>
          <div
            class="avator"
            :style="{
              background:
                'url(' + v.avatar_img + ') center center / cover no-repeat',
            }"
          ></div>
          <div class="text">
            <p class="text-title">
              <span class="name">{{ v.truename }}</span>
              <span class="school">{{ v.school }}</span>
            </p>
            <p class="text-pro">
              <span><i class="iconfont icon-hat"></i>{{ v.edu }}</span>
              <span>{{ v.start_time }}</span>
              <span>{{ v.specialty }}</span>
              <span>{{ v.schoolresult }}</span>
            </p>
          </div>
          <div class="text-show">
            <span
              class="see"
              :class="[v.is_see && 'active']"
              @click="jumpTo(v)"
              >{{ v.is_see === 1 ? '已查看' : '查看简历' }}</span
            >
            <span class="pass" @click="submitOne(v.id)">忽略</span>
          </div>
        </div>
      </div>
      <client-only>
        <el-pagination
          hide-on-single-page
          background
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next"
          :current-page="pageNo"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </client-only>
    </div>
    <client-only>
      <el-dialog
        width="445px"
        :visible.sync="showConfirm"
        :show-close="false"
        custom-class="dialog-confirm"
      >
        <Confirm :info-title="infoTitle" @confirm="confirm" @cancel="cancel" />
      </el-dialog>
    </client-only>
  </div>
</template>

<script>
import { resumeList, resumeSee, downLoadResume } from '@/api/job';

export default {
  asyncData: ({ req }) => ({
  }),
  components: {},
  data () {
    return {
      id: '',
      resumeTitle: '',
      checkAll: false,
      total: 0,
      pageNo: 1,
      pageSize: 15,
      active: 1,
      resumeList: [],
      showConfirm: false,
      infoTitle: '确认忽略所选简历？',
      chooseIndex: null,
      chooseId: null,
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {
    this.id = this.$route.query.id;
    this.resumeTitle = this.$route.query.resumeTitle;
    this.fetchData();
  },
  mounted () {
  },
  watch: {

  },
  computed: {

  },
  methods: {
    changeAll () { // 全选本页
      this.resumeList = this.resumeList.map(s => {
        s.check = this.checkAll;
        return s;
      })
    },
    submitOne (id, index) {
      this.chooseIndex = index;
      this.chooseId = id;
      this.showConfirm = true;
    },
    submitBatch () {
      // 有没有选择
      if (this.resumeList.every(s => !s.check)) {
        this.$message.warning('请选择需要忽略的简历！');
        return
      }
      this.chooseIndex = null;
      this.chooseId = '';
      this.showConfirm = true;
    },
    cancel () {
      this.chooseIndex = null;
      this.chooseId = '';
      this.showConfirm = false;
    },
    confirm () {
      if (this.chooseId) {
        this.toPass(this.chooseId, this.chooseIndex)
      } else {
        this.batchPass();
      }
      this.showConfirm = false;
    },
    chooseWay (id) {
      return resumeSee({
        id: Array.isArray(id) ? id.join(',') : id
      })
    },
    toPass (id, index) { // 忽略
      this.chooseWay(id).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg || '提交成功！');
          this.resumeList.splice(index, 1);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
    batchPass () { // 批量忽略
      const list = [];
      this.resumeList.forEach(c => {
        c.check && list.push(c.id)
      });
      this.chooseWay(list).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg || '提交成功！');
          const curList = [];
          this.resumeList.forEach(s => {
            if (list.findIndex(f => f === s.id) === -1) {
              curList.push(s);
            }
          });
          this.resumeList = curList;
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
    batchDownload () { // 批量下载
      const list = [];
      this.resumeList.forEach(c => {
        c.check && list.push(c.r_id)
      });
      const ids = list.join(',') || '';
      if (!ids) {
        this.$message.warning('请选择需要下载的简历！');
        return
      }
      downLoadResume({
        jid: this.id,
        ids,
      }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg || '提交成功！');
          if (res.data) {
            res.data.forEach(s => {
              window.open(s, '_blank')
            })
          }
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
    toSearch (active) {
      this.active = active;
      this.pageNo = 1;
      this.fetchData();
    },
    handleCurrentChange (val) {
      this.pageNo = val;
      this.fetchData();
    },
    async fetchData () {
      await resumeList({
        jid: this.id,
        status: this.active,
      }).then(res => {
        if (res.code === 200) {
          this.total = res.data.count || 0;
          this.resumeList = res.data && res.data.map(s => {
            s.check = false;
            return s;
          });
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
    jumpTo (obj) {
      obj.is_see = 1;
      const { href } = this.$router.resolve({
        path: '/resume/detail',
        query: { id: obj.r_id, oid: obj.id, resumeTitle: this.resumeTitle }
      });
      window.open(href, '_blank');
    }
  },
}
</script>

<style lang="scss" scoped>
.inside-page {
  width: 100%;
  position: relative;
  .resume {
    .filter {
      height: 50px;
      line-height: 50px;
      background: #f6f7f8;
      span {
        display: inline-block;
        width: 85px;
        height: 18px;
        line-height: 18px;
        font-size: 18px;
        text-align: center;
        color: #999;
        cursor: pointer;
        border-right: 1px solid #ccc;
        &.active,
        &:hover {
          color: #24292f;
        }
        &:last-child {
          border: 0;
        }
      }
    }
    input {
      height: 16px;
      width: 16px;
      margin-right: 10px;
      border: 1px solid #999;
    }
  }
  .resume-choose {
    height: 60px;
    line-height: 60px;
    padding-left: 15px;
    label,
    & > span {
      font-size: 18px;
      margin-right: 50px;
      color: #999;
      &:hover {
        cursor: pointer;
        color: $base-color;
      }
    }
    label {
      input {
        border-color: #24292f;
      }
      span {
        color: #24292f;
      }
    }
  }
  .resume-list {
    .resume-item {
      height: 120px;
      margin-bottom: 10px;
      border: 1px solid #ebebeb;
      label {
        height: 100%;
        width: 16px;
        float: left;
        margin: 0 15px;
        line-height: 120px;
        cursor: pointer;
      }
      .avator {
        float: left;
        height: 90px;
        line-height: 90px;
        width: 90px;
        margin: 15px 30px 0 15px;
        font-size: 0;
        border: 1px solid #ebebeb;
        border-radius: 50%;
        overflow: hidden;
        text-align: center;
        img {
          height: 100%;
          vertical-align: middle;
        }
      }
      .text {
        float: left;
        margin-top: 20px;
        line-height: 40px;
        .text-title {
          font-size: 18px;
          .name {
            color: #24292f;
            margin-right: 40px;
          }
          .school {
            color: #999;
          }
        }
        .text-pro {
          i {
            font-size: 14px;
            color: #999;
            margin-right: 5px;
          }
          span {
            margin-right: 30px;
            font-size: 14px;
            color: #999;
            &:first-of-type {
              margin-right: 0;
            }
          }
        }
      }
      .text-show {
        float: right;
        height: 30px;
        line-height: 30px;
        margin-top: 45px;
        margin-right: 60px;
        span {
          margin-left: 30px;
          cursor: pointer;
        }
        .see {
          color: $base-color;
          &:hover {
            color: $base-color-hover;
          }
          &.active {
            color: $base-color-danger;
          }
        }
        .pass {
          color: #999;
          &:hover {
            color: $base-color;
          }
        }
      }
    }
  }
}
</style>
